<template>
  <!-- if you don't like line break ,then use <span> instead of the <div> -->
  <span>
    <button @click="sub">-</button>
    <!-- note there,use span to show the data -->
    <span>{{ quantity }}</span>
    <button @click="add">+</button>
  </span>
</template>

<script>
export default {
  // get the data from its parent element.
  //  the "quantitiy" will be show in the Counter component element
  // the the "index " will be distinguished the different item
  props: ["quantity", "index"],
  //   operate the data,then send to(emit)to is parent element,so that the parent element(component) could know witch one was triggered event.
  methods: {
    sub() {
      this.$emit("sub", this.index);
    },
    add() {
      this.$emit("add", this.index);
    },
  },
};
</script>